<template>
  <el-date-picker
    v-model="timeValueSy"
    type="monthrange"
    range-separator="至"
    start-placeholder="开始日期"
    :default-value="timeValueSy"
    end-placeholder="结束日期"
    @change="optTimeSy"
    format="YYYY-MM"
    value-format="YYYY-MM"
    unlink-panels
    de
    :clearable="false"
    :shortcuts="shortcuts"
  >
  </el-date-picker>
</template>

<script setup lang="ts">
import { ref, defineProps, onMounted, defineEmits } from "vue";

const timeValueSy = ref<any>(null);
const emit = defineEmits(["timeValueChange"]);
const shortcuts = [
  {
    text: "本月",
    value: [new Date(), new Date()],
  },
  {
    text: "今年至今",
    value: () => {
      const end = new Date();
      const start = new Date(new Date().getFullYear(), 0);
      return [start, end];
    },
  },
  {
    text: "最近6个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setMonth(start.getMonth() - 6);
      return [start, end];
    },
  },
];
// 接收参数
const props = defineProps({
  type: {
    type: Object,
    default: () => {},
  },
});

timeValueSy.value = props.type.times;

const optTimeSy = (value: any) => {
  let dataValue = {
    type: props.type.type,
    times: value,
  };
  emit("timeValueChange", dataValue);
};
onMounted(() => {});
</script>
<style scoped lang="less"></style>
